<template>
  <div class="component-manage-check-revenue">
    <div class="total-amount">
      <div class="item">
        <div class="pay-name">
          {{ $t("order.weixinPay") }}
        </div>
        <div class="pay-amount">
          ￥ {{ reconciliationDetails.wechatAmount }}
        </div>
        <div class="pay-percent">
          {{ percent(reconciliationDetails.wechatPercent) }}%
        </div>
      </div>
      <div class="item">
        <div class="pay-name">
          {{ $t("order.aliPay") }}
        </div>
        <div class="pay-amount">
          ￥ {{ reconciliationDetails.alipayAmount }}
        </div>
        <div class="pay-percent">
          {{ percent(reconciliationDetails.alipayPercent) }}%
        </div>
      </div>
      <div class="item">
        <div class="pay-name">
          {{ $t("publics.pointsRedemption") }}
        </div>
        <div class="pay-amount">
          {{ reconciliationDetails.scoreCount }}
        </div>
      </div>
      <div class="item">
        <div class="pay-name">
          {{ $t("publics.balancePay") }}
          <el-tooltip
            effect="dark"
            placement="right"
          >
            <template #content>
              <div style="max-width:500px">
                {{ $t("shopWallet.amountPaidBuyerAccountBalance") }}
              </div>
            </template>
            <el-icon><QuestionFilled /></el-icon>
          </el-tooltip>
        </div>
        <div class="pay-amount">
          ￥ {{ reconciliationDetails.balanceAmount }}
        </div>
        <div class="pay-percent">
          {{ percent(reconciliationDetails.balancePercent) }}%
        </div>
      </div>
      <div
        v-if="paySettlementType!==1"
        class="item marBottom"
      >
        <div class="pay-name">
          {{ $t("shopWallet.payPal") }}
        </div>
        <div class="pay-amount">
          ￥ {{ reconciliationDetails.paypalAmount }}
        </div>
        <div class="pay-percent">
          {{ percent(reconciliationDetails.paypalPercent) }}%
        </div>
      </div>
      <div class="item marBottom">
        <div class="pay-name">
          {{ $t("shopWallet.totalNum") }}
        </div>
        <div class="pay-amount">
          ￥ {{ reconciliationDetails.total }}
        </div>
      </div>
    </div>
    <!--    平台收入-->
    <div
      v-if="hasPlatformDetail"
      class="flow-title"
    >
      <div class="flow-title-left">
        <div class="line" />
        <div class="text">
          {{ $t('shopWallet.platformIncome') }}
        </div>
      </div>
    </div>
    <div
      v-if="hasPlatformDetail"
      class="list"
    >
      <el-table
        :data="platformIncomeDetail"
        style="width: 100%"
        header-cell-class-name="table-header"
        row-class-name="table-row-low"
      >
        <el-table-column
          prop="alipayAmount"
          align="center"
          :label="$t('order.aliPay')"
        >
          <span> {{ platformIncomeDetail[0].alipayAmount !== null ? '￥' + platformIncomeDetail[0].alipayAmount : '-'
          }}</span>
        </el-table-column>
        <el-table-column
          prop="wechatAmount"
          align="center"
          :label="$t('order.weixinPay')"
        >
          <span> {{ platformIncomeDetail[0].wechatAmount !== null ? '￥' + platformIncomeDetail[0].wechatAmount : '-'
          }}</span>
        </el-table-column>
        <el-table-column
          prop="balanceAmount"
          align="center"
          :label="$t('publics.balancePay')"
        >
          <span> {{ platformIncomeDetail[0].balanceAmount !== null ? '￥' + platformIncomeDetail[0].balanceAmount : '-'
          }}</span>
        </el-table-column>
        <el-table-column
          :label="$t('user.scorePay')"
          prop="scoreCount"
          align="center"
        >
          <span> {{ platformIncomeDetail[0].scoreCount !== null ? platformIncomeDetail[0].scoreCount : '-' }}</span>
        </el-table-column>
        <el-table-column
          v-if="paySettlementType!==1"
          prop="paypalAmount"
          :label="$t('shopWallet.payPal')"
          align="center"
        >
          <span> {{ platformIncomeDetail[0].paypalAmount !== null ? '￥' + platformIncomeDetail[0].paypalAmount : '-'
          }}</span>
        </el-table-column>
        <el-table-column
          prop="total"
          :label="$t('shopWallet.totalNum')"
          align="center"
        >
          <span> {{ platformIncomeDetail[0].total !== null ? '￥' + platformIncomeDetail[0].total : '-' }}</span>
        </el-table-column>
        <el-table-column
          prop="operation"
          :label="$t('remindPop.operation')"
          align="center"
        >
          <div
            class="default-btn text-btn"
            @click="handleDetail(0)"
          >
            {{ $t("shopWallet.riconciliazioneDetail") }}
          </div>
        </el-table-column>
      </el-table>
    </div>
    <!--    商城收入-->
    <div class="flow-title">
      <div class="flow-title-left">
        <div class="line" />
        <div class="text">
          {{ $t('shopWallet.shopIncome') }}
        </div>
      </div>
    </div>
    <div class="list">
      <el-table
        :data="tableData"
        style="width: 100%"
        header-cell-class-name="table-header"
        row-class-name="table-row-low"
      >
        <el-table-column
          :label="$t('formData.serialNumber')"
          type="index"
          width="70"
        />
        <el-table-column
          :label="$t('coupon.shopName')"
          prop="shopName"
        >
          <template #default="scope">
            <span> {{ scope.row.shopName }}
              <!--              <span v-if="scope.row.shopId === 0" class="platform-icon">{{$t("home.platform")}}</span>-->
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="alipayAmount"
          :label="$t('order.aliPay')"
        >
          <template #default="scope">
            <span> {{ scope.row.alipayAmount !== null ? '￥' + scope.row.alipayAmount : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="wechatAmount"
          :label="$t('order.weixinPay')"
        >
          <template #default="scope">
            <span> {{ scope.row.wechatAmount !== null ? '￥' + scope.row.wechatAmount : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="balanceAmount"
          :label="$t('publics.balancePay')"
        >
          <template #default="scope">
            <span> {{ scope.row.balanceAmount !== null ? '￥' + scope.row.balanceAmount : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('user.scorePay')"
          prop="scoreCount"
        >
          <template #default="scope">
            <span> {{ scope.row.scoreCount !== null ? scope.row.scoreCount : '-' }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column
          :label="$t('publics.creditPayment')"
          prop="paypalAmount">
          <template slot-scope="scope">
            <span>￥ {{ scope.row.paypalAmount }}</span>
          </template>
        </el-table-column> -->
        <el-table-column
          v-if="paySettlementType!==1"
          prop="paypalAmount"
          :label="$t('shopWallet.payPal')"
        >
          <template #default="scope">
            <span> {{ scope.row.paypalAmount !== null ? '￥' + scope.row.paypalAmount : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="total"
          :label="$t('shopWallet.totalNum')"
        >
          <template #default="scope">
            <span> {{ scope.row.total !== null ? '￥' + scope.row.total : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="operation"
          :label="$t('remindPop.operation')"
          align="center"
        >
          <template #default="scope">
            <!-- <div class="default-btn text-btn" @click="exportFrom(scope.row.orderNumber)">{{$t("shopWallet.exportRiconciliazioneDetail")}}</div> -->
            <div
              class="default-btn text-btn"
              @click="handleDetail(scope.row.shopId)"
            >
              {{ $t("shopWallet.riconciliazioneDetail") }}
            </div>
            <!-- <el-button type="text" size="small" @click="handleDetail(scope.row.orderNumber)">明细</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      v-if="total > 0"
      :current-page="params.current"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="params.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 分页条 -->
    <!-- <pagination style="text-align: right" :total="total" :page.sync="params.pageNum" :limit.sync="params.pageSize" @pagination="pagination" /> -->
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import Big from 'big.js'

const Data = reactive({
  time: '',
  activeName: 'second',
  total: 0,
  params: {
    pageNum: 1,
    pageSize: 10
  },
  tableData: [],
  reconciliationDetails: {
    wechatAmount: 0.00,
    wechatPercent: 0.00,
    alipayAmount: 0.00,
    alipayPercent: 0.00,
    balanceAmount: 0.00,
    balancePercent: 0.00,
    paypalAmount: 0.00,
    paypalPercent: 0.00,
    scoreCount: 0
  },
  hasPlatformDetail: false,
  platformIncomeDetail: [],
  timeData: ''
})

const { total, params, tableData, reconciliationDetails, hasPlatformDetail, platformIncomeDetail } = toRefs(Data)

const allinpayStore = useAllinpayStore()
const paySettlementType = computed(() => {
  return allinpayStore.paySettlementType
})

const percent = (value) => {
  if (!value) {
    return 0
  }
  return new Big(value).times(100).toFixed(2)
}

const handleCurrentChange = (val) => {
  Data.params.current = val
  getData()
}

const getDataDetail = (params) => {
  Data.timeData = params
  Data.tableData = []
  http({
    url: http.adornUrl('/platform/accountDetail/getIncomeAccountDetail'),
    method: 'get',
    params
  }).then(({ data }) => {
    Data.reconciliationDetails = data
  })
  Data.hasPlatformDetail = false
  if (!Data.timeData.shopName || Data.timeData.shopName === '') {
    getPlatformDataDetail()
  }
  getData()
}

const getData = () => {
  http({
    url: http.adornUrl('/platform/accountDetail/getIncomeAccountDetailInfo'),
    method: 'get',
    params: { ...Data.timeData, ...Data.params }
  }).then(({ data }) => {
    Data.tableData = data.records
    Data.total = data.total
  })
}

const getPlatformDataDetail = () => {
  http({
    url: http.adornUrl('/platform/accountDetail/getIncomeAccountDetail'),
    method: 'get',
    params: http.adornParams({
      startTime: Data.timeData.startTime,
      endTime: Data.timeData.endTime,
      shopId: 0
    })
  }).then(({ data }) => {
    Data.hasPlatformDetail = true
    Data.platformIncomeDetail = []
    Data.platformIncomeDetail.push(data)
  })
}

const handleSizeChange = (val) => {
  Data.params.size = val
  getData()
}

const router = useRouter()
// 跳转到明细详情页
const handleDetail = (shopId) => {
  router.push({
    path: '/finance/reconciliation-details/index',
    query: {
      type: 1,
      shopId,
      ...Data.timeData
    }
  })
}

defineExpose({
  getDataDetail
})
</script>

<style lang="scss" scoped>
.component-manage-check-revenue {
  .total-amount {
    background: #f7f8fa;
    padding: 15px 40px;
    flex-wrap: wrap;
    width: 100%;
    display: flex;
    flex-direction: row;

    .item {
      // flex: 1;
      font-size: 14px;
      width: 25%;

      .pay-name {
        color: #666;
        margin-bottom: 8px;
      }

      .pay-amount {
        color: #333;
        font-size: 26px;
        font-weight: bold;
        margin-bottom: 8px;
      }

      .pay-percent {
        color: rgba(0, 0, 0, 0.4);
      }
    }

    .marBottom {
      margin-top: 15px;
    }
  }

  .list {
    margin-top: 25px;
    padding-bottom: 10px;
  }

  .flow-title {
    width: 100%;
    background: #F7F8FA;
    box-sizing: border-box;
    padding: 11px 15px;
    display: flex;
    justify-content: space-between;
    margin: 20px 0 0px 0;

    .flow-title-left {
      display: flex;
      align-items: center;

      .line {
        width: 4px;
        height: 19px;
        background: #155bd4;
        opacity: 1;
        border-radius: 2px;
        margin-right: 10px;
      }

      .text {
        font-size: 18px;
        font-weight: bold;
        color: #333333;
        opacity: 1;
      }
    }
  }
}
</style>
